// CSS Main
@import "main.less";

// content
//----------------------------------------

.theme_select {
	height:24px;
	display:block;
	clear:right;
	background:url("@{headerBg}") @orange repeat-x 0 -32px;
	.ages {
		float:left;
		margin:4px 10px;
		li {
			float:left;
			margin-right:5px;
			a {
				text-align:center;
				display:block;
				color:@white;
				width:46px;
				height:18px;
				line-height:14px;
				&:hover{
					background:url("@{headerBg}")  -49px -71px;
					color:darken(@orange,20%);
				}
				&.current{
					background:url("@{headerBg}")  0 -71px;
					color:@orange;
					font-weight:bold;
				}
			}
			
		}
	}
	.selector {
		float:right;
		margin:4px 10px;
		li{
			float:left;
			a{
				display:block;
				background-image:url("@{headerBg}");
				width:16px;
				height:16px;
				&.spring{
					background-position:-99px 0;
				}
				&.summer{
					background-position:-139px 0;
				}
				&.autumn{
					background-position:-27px 0;
				}
				&.winter{
					background-position:2px 0;
				}
			}
		}
	}
}

.global_nav{
	.logo {
		float:left;
		padding:10px;
	}
	article {
		float:right;
		margin-top:10px;
		.common_tools {
			float:right;
			clear:right;
			height:34px;
			li {
				float:left;
				margin-left:10px;
				a{
					font-size:@baseFontSize;
					line-height:32px;
					em{
						float:left;
						width:32px;
						height:32px;
						margin-right:5px;
						background-image:url("@{headerBg}");
						&.doodle{
							background-position:-282px -71px;
						}
						&.music {
							background-position:-322px -71px;
						}
					}
				}
			}
		}
		.navi_link {
			margin-top:20px;
			width:638px;
			height:40px;
			background:url("@{headerBg}") 0 -210px;
			clear:both;
			menu {
				margin:0 0 0 40px;
				font-size:@midFontSize;
				font-weight:bold;
				line-height:38px;
				overflow:hidden;
				float:left;
				li {
					float:left;
					a {
						display:block;
						margin-right:10px;
						width:60px;
						height:40px;
						color:@white;
						text-align:center;
						&.current{
							background:url("@{headerBg}") -120px -64px;
						}
						&:hover {
							background:url("@{headerBg}") 0 -89px;
						}
					}
				}
			}
			.search_bar {
				float:right;
				width:250px;
				.keywords {
					margin:10px 0 0 14px;
					width:170px;
					border:0;
					height:18px;
					line-height:16px;
					float:left;
				}
				.search_button {
					margin:8px 0 0 20px;
					display:block;
					width:32px;
					height:32px;
					background:url("@{headerBg}") -190px -70px;
					border:0;
					float:left;
					&:hover{
						background:url("@{headerBg}") -235px -70px;
						margin:4px 0 0 16px;
					}
				}
			}
		}
	}
}


// content
//------------------------------------------------------
.banner{
	background:url("@{bannerBg}") no-repeat bottom right;
	height:240px;
	position:relative;
	.avatars{
		overflow:hidden;
		clear:both;
		li {
			position:absolute;
			&.baby_first {
				left:0;	
			}
			&.baby_second {
				left:80px;
			}
			&.baby_last {
				left:160px;
			}
		}
	}
	.summary {
		height:114px;
		position:absolute;
		top:100px;
		.content{
			background:url("@{loginBg}") no-repeat -20px -10px;
			height:116px;
			float:left;
			width:300px;
			p{
				margin:20px 0;
			}
			address {
				float:right;
				height:20px;
				padding:0 10px;
				line-height:18px;
				background-color:lighten(@orange, 40%);
				cite {
					background:url("@{iconBg}") no-repeat -3px -163px;
					padding-left:10px;
				}
			}
		}
		.left_corner {
			float:left;
			height:116px;
			width:20px;
			background:url("@{loginBg}") no-repeat 0 -10px;
		}		
		.right_corner {
			float:left;
			height:116px;
			width:20px;
			background:url("@{loginBg}") no-repeat right -10px;
		}
		.tip_arrow {
			width:18px;
			height:10px;
			background:url("@{loginBg}") no-repeat -85px top;
			position:absolute;
			top:-8px;
			left:60px;
		}
	}
}

.subject {
	clear:both;
	overflow:hidden;
	.events {
		float:left;
		width:673px;
		position:relative;
		overflow:hidden;
		.feed_top_corner {
			height:70px;
			width:100%;
			display:block;
			background:url("@{loginBg}") no-repeat left -485px;
			position:absolute;
			top:0px;
			z-index:-1;
		}
		.feeds {
			margin-top:20px;
			padding:0 20px;
			border-left: 3px @darkOrange solid;
			border-right: 3px @darkOrange solid;
		}
		.feed_bottom_corner {
			height:20px;
			width:100%;
			display:block;
			background:url("@{loginBg}") no-repeat left bottom;
		}
	}
	.login {
		float:right;
		width:294px;
		overflow:hidden;
		form {
			width:100%;
			height:315px;
			background:url("@{loginBg}") no-repeat 0 -145px;
			input, .role {
				border:0;
				clear:both;
				margin-left:98px;
				width:140px;
				height:20px;
				color:darken(@orange, 10%);
				&.username {
					margin-top:127px;
				}
				&.password{
					margin-top:23px;
				}
			}
			.role {
				margin-top:21px;
				width:68px;
				a {
					display:block;
					text-align:left;
					padding-left:10px;
					position:relative;
					em {
						background:url("@{headerBg}") no-repeat -287px 1px;
						height:14px;
						width:14px;
						line-height:14px;
						display:block;
						position:absolute;
						right:2px;
						top:3px;
					}
				}
			}
			.login_btn {
				clear:both;
				width:113px;
				height:33px;
				background:url("@{loginBg}") no-repeat -318px -157px;
				border:0;
				display:block;
				margin-top:20px;
				margin-left:91px;
			}
		}
		// register
		.register_btn {
			display:block;
			width:278px;
			height:76px;
			margin-top:20px;
			background:url("@{loginBg}") no-repeat -300px -227px;
		}
	}
}

